<!--
* GenesisUI Bootstrap 4 Admin Template built as framework!
* Version 1.3.3
* https://GenesisUI.com
* Copyright 2016 creativeLabs Łukasz Holeczek
* License : https://GenesisUI.com/license.html
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="LeafUI Admin - UI Admin Kit Powered by Bootstrap 4">
        <meta name="author" content="Lukasz Holeczek">
        <meta name="keyword" content="LeafUI Admin - UI Admin Kit Powered by Bootstrap 4">
        <!-- <link rel="shortcut icon" href="assets/ico/favicon.png"> -->
        <title>LeafUI Admin - UI Admin Kit</title>
        <!-- Main styles for this application -->
        <link href="assets/css/style.css" rel="stylesheet">
    </head>
    <!-- BODY options, add following classes to body to change options
		1. 'sidebar-nav'		  - Navigation on the left
			1.1. 'sidebar-off-canvas'	- Off-Canvas
				1.1.1 'sidebar-off-canvas-push'	- Off-Canvas which move content
				1.1.2 'sidebar-off-canvas-with-shadow'	- Add shadow to body elements
		2. 'fixed-nav'			  - Fixed navigation
		3. 'navbar-fixed'		  - Fixed navbar
	-->
    <body class="navbar-fixed sidebar-nav fixed-nav">
        <header class="navbar">
            <div class="container-fluid">
                <button class="navbar-toggler mobile-toggler hidden-lg-up" type="button">&#9776;</button>
                <a class="navbar-brand" href="#"></a>
                <ul class="nav navbar-nav hidden-md-down">
                    <li class="nav-item">
                        <a class="nav-link navbar-toggler layout-toggler" href="#">☰</a>
                    </li>
                    <li class="nav-item p-x-1">
                        <a class="nav-link" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item p-x-1">
                        <a class="nav-link" href="#">Users</a>
                    </li>
                    <li class="nav-item p-x-1">
                        <a class="nav-link" href="#">Settings</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav pull-right hidden-md-down">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="assets/img/flags/United-Kingdom.png" class="img-flag" alt="English">
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <div class="dropdown-header text-xs-center">
                                <strong>Choose language</strong>
                            </div>
                            <a class="dropdown-item" href="#">
                                <img src="assets/img/flags/Poland.png" class="img-flag" alt="Polish"> Polish</a>
                            <a class="dropdown-item" href="#">
                                <img src="assets/img/flags/United-Kingdom.png" class="img-flag" alt="English"> English</a>
                            <a class="dropdown-item" href="#">
                                <img src="assets/img/flags/Spain.png" class="img-flag" alt="Espa&#xF1;ol"> Español</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="icon-bell"></i><span class="label label-pill label-danger">5</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            <span class="hidden-md-down">admin</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <div class="dropdown-header text-xs-center">
                                <strong>Account</strong>
                            </div>
                            <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="label label-info">42</span></a>
                            <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="label label-success">42</span></a>
                            <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="label label-danger">42</span></a>
                            <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="label label-warning">42</span></a>
                            <div class="dropdown-header text-xs-center">
                                <strong>Settings</strong>
                            </div>
                            <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
                            <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a>
                            <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="label label-default">42</span></a>
                            <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="label label-primary">42</span></a>
                            <div class="divider"></div>
                            <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a>
                            <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link navbar-toggler aside-toggle" href="#">&#9776;</a>
                    </li>
                </ul>
            </div>
        </header>
        <div class="sidebar">
            <nav class="sidebar-nav">
                <ul class="nav">
                    <li class="nav-title">
                        Dashboard
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> DASHBOARD <span class="label label-info">NEW</span></a>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-title">
                        UI Elements
                    </li>
                    <li class="nav-item nav-dropdown">
                        <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Components</a>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a class="nav-link" href="components-buttons.html"><i class="icon-puzzle"></i> BUTTONS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="components-social-buttons.html"><i class="icon-puzzle"></i> Social Buttons</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="components-cards.html"><i class="icon-puzzle"></i> CARDS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="components-forms.html"><i class="icon-puzzle"></i> FORMS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="components-switches.html"><i class="icon-puzzle"></i> SWITCHES</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="components-tables.html"><i class="icon-puzzle"></i> TABLES</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item nav-dropdown">
                        <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> ICONS</a>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item nav-dropdown">
                        <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-energy"></i> Plugins</a>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a class="nav-link" href="plugins-calendar.html"><i class="icon-calendar"></i> CALENDAR</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="plugins-notifications.html"><i class="icon-info"></i> NOTIFICATIONS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="plugins-sliders.html"><i class="icon-equalizer"></i> SLIDERS</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="plugins-tables.html"><i class="icon-list"></i> TABLES</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="forms.html"><i class="icon-note"></i> FORMS <span class="label label-danger">NEW</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> WIDGETS <span class="label label-info">NEW</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> CHARTS</a>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-title">
                        Extras
                    </li>
                    <li class="nav-item nav-dropdown">
                        <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> PAGES</a>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item nav-dropdown">
                        <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-layers"></i> UI Kits</a>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item nav-dropdown">
                                <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-speech"></i> INVOICING</a>
                                <ul class="nav-dropdown-items">
                                    <li class="nav-item">
                                        <a class="nav-link" href="UIkits-invoicing-invoice.html"><i class="icon-speech"></i> INVOICE</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav-dropdown-items">
                            <li class="nav-item nav-dropdown">
                                <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-speech"></i> EMAIL</a>
                                <ul class="nav-dropdown-items">
                                    <li class="nav-item">
                                        <a class="nav-link" href="UIkits-email-inbox.html"><i class="icon-speech"></i> INBOX</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="UIkits-email-message.html"><i class="icon-speech"></i> MESSAGE</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="UIkits-email-compose.html"><i class="icon-speech"></i> COMPOSE</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- Main content -->
        <main class="main">
            <!-- Breadcrumb -->
            <ol class="breadcrumb r-0">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            <div class="container-fluid">
                <div emailapp="" class="emailApp">
                    <nav>
                        <a href="page-inbox-compose.html" class="btn btn-danger btn-block">New Email</a>
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="label label-danger">4</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-star"></i> Stared</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-rocket"></i> Sent</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-trash-o"></i> Trash</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-bookmark"></i> Important<span class="label label-info">5</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="label label-danger">4</span></a>
                            </li>
                        </ul>
                    </nav>
                    <main>
                        <div class="toolbar">
                            <span class="btn-group">
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-envelope"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-star"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-star-o"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-bookmark-o"></span>
                                </button>
                            </span>
                            <span class="btn-group">
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-mail-reply"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-mail-reply-all"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-mail-forward"></span>
                                </button>
                            </span>
                            <button type="button" class="btn btn-secondary">
                                <span class="fa fa-trash-o"></span>
                            </button>
                            <span class="btn-group">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
                                    <span class="fa fa-tags"></span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">add label <span class="label label-danger"> Home</span></a></li>
                                    <li><a href="#">add label <span class="label label-info">Job</span></a></li>
                                    <li><a href="#">add label <span class="label label-success">Clients</span></a></li>
                                    <li><a href="#">add label <span class="label label-warning">News</span></a></li>
                                </ul>
                            </span>
                            <span class="btn-group pull-right">
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-chevron-left"></span>
                                </button>
                                <button type="button" class="btn btn-secondary">
                                    <span class="fa fa-chevron-right"></span>
                                </button>
                            </span>
                        </div>
                        <ul class="messages-list">
                            <li class="unread">
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">
                                            <span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">
                                            <span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li class="unread">
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li class="unread">
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li class="unread">
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a ui-sref="app.uikits.email.compose">
                                    <div class="header">
                                        <span class="action"><i class="fa fa-square-o"></i></span>
                                        <span class="from">Lukasz Holeczek</span>
                                        <span class="date">Today, 3:47 PM</span>
                                    </div>
                                    <div class="title">
                                        <span class="action"><i class="fa fa-star-o"></i></span>
                                        Lorem ipsum dolor sit amet.
                                    </div>
                                    <div class="description">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </main>
                </div>
            </div>
            <!-- /.conainer-fluid -->
        </main>
        <aside class="aside-menu">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#timeline" role="tab"><i class="icon-list"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#messages" role="tab"><i class="icon-speech"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#settings" role="tab"><i class="icon-settings"></i></a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="timeline" role="tabpanel">
                    <div class="callout r-0 m-a-0 p-y-h text-muted text-xs-center bg-faded text-uppercase">
                        <small><b>Today</b></small>
                    </div>
                    <hr class="transparent m-x-1 m-y-0">
                    <div class="callout r-0 callout-warning m-a-0 p-y-1">
                        <div class="avatar pull-xs-right">
                            <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                        </div>
                        <div>Meeting with
                            <strong>Lucas</strong>
                        </div>
                        <small class="text-muted m-r-1"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
                        <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
                    </div>
                    <hr class="m-x-1 m-y-0">
                    <div class="callout r-0 callout-info m-a-0 p-y-1">
                        <div class="avatar pull-xs-right">
                            <img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                        </div>
                        <div>Skype with
                            <strong>Megan</strong>
                        </div>
                        <small class="text-muted m-r-1"><i class="icon-calendar"></i>&nbsp; 4 - 5pm</small>
                        <small class="text-muted"><i class="icon-social-skype"></i>&nbsp; On-line </small>
                    </div>
                    <hr class="transparent m-x-1 m-y-0">
                    <div class="callout r-0 m-a-0 p-y-h text-muted text-xs-center bg-faded text-uppercase">
                        <small><b>Tomorrow</b></small>
                    </div>
                    <hr class="transparent m-x-1 m-y-0">
                    <div class="callout r-0 callout-danger m-a-0 p-y-1">
                        <div>New UI Project -
                            <strong>deadline</strong>
                        </div>
                        <small class="text-muted m-r-1"><i class="icon-calendar"></i>&nbsp; 10 - 11pm</small>
                        <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ </small>
                        <div class="avatars-stack m-t-h">
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                        </div>
                    </div>
                    <hr class="m-x-1 m-y-0">
                    <div class="callout r-0 callout-success m-a-0 p-y-1">
                        <div>
                            <strong>#10 Startups.Garden</strong> Meetup</div>
                        <small class="text-muted m-r-1"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
                        <small class="text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA </small>
                    </div>
                    <hr class="m-x-1 m-y-0">
                    <div class="callout r-0 callout-primary m-a-0 p-y-1">
                        <div>
                            <strong>Team meeting</strong>
                        </div>
                        <small class="text-muted m-r-1"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
                        <small class="text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ </small>
                        <div class="avatars-stack m-t-h">
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                            <div class="avatar avatar-xs">
                                <img src="assets/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                            </div>
                        </div>
                    </div>
                    <hr class="m-x-1 m-y-0">
                </div>
                <div class="tab-pane p-a-1" id="messages" role="tabpanel">
                    <div class="message">
                        <div class="p-y-1 p-b-3 m-r-1 pull-left">
                            <div class="avatar">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status label-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Lukasz Holeczek</small>
                            <small class="text-muted pull-right m-t-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
                    </div>
                    <hr>
                    <div class="message">
                        <div class="p-y-1 p-b-3 m-r-1 pull-left">
                            <div class="avatar">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status label-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Lukasz Holeczek</small>
                            <small class="text-muted pull-right m-t-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
                    </div>
                    <hr>
                    <div class="message">
                        <div class="p-y-1 p-b-3 m-r-1 pull-left">
                            <div class="avatar">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status label-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Lukasz Holeczek</small>
                            <small class="text-muted pull-right m-t-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
                    </div>
                    <hr>
                    <div class="message">
                        <div class="p-y-1 p-b-3 m-r-1 pull-left">
                            <div class="avatar">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status label-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Lukasz Holeczek</small>
                            <small class="text-muted pull-right m-t-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
                    </div>
                    <hr>
                    <div class="message">
                        <div class="p-y-1 p-b-3 m-r-1 pull-left">
                            <div class="avatar">
                                <img src="assets/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
                                <span class="avatar-status label-success"></span>
                            </div>
                        </div>
                        <div>
                            <small class="text-muted">Lukasz Holeczek</small>
                            <small class="text-muted pull-right m-t-q">1:52 PM</small>
                        </div>
                        <div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
                        <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
                    </div>
                </div>
                <div class="tab-pane p-a-1" id="settings" role="tabpanel">
                    <h6>Settings</h6>
                    <div class="aside-options">
                        <div class="clearfix m-t-2">
                            <small><b>Option 1</b></small>
                            <label class="switch switch-text switch-pill switch-success switch-sm pull-right">
                                <input type="checkbox" class="switch-input" checked>
                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                <span class="switch-handle"></span>
                            </label>
                        </div>
                        <div>
                            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
                        </div>
                    </div>
                    <div class="aside-options">
                        <div class="clearfix m-t-1">
                            <small><b>Option 2</b></small>
                            <label class="switch switch-text switch-pill switch-success switch-sm pull-right">
                                <input type="checkbox" class="switch-input">
                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                <span class="switch-handle"></span>
                            </label>
                        </div>
                        <div>
                            <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
                        </div>
                    </div>
                    <div class="aside-options">
                        <div class="clearfix m-t-1">
                            <small><b>Option 3</b></small>
                            <label class="switch switch-text switch-pill switch-success switch-sm pull-right">
                                <input type="checkbox" class="switch-input">
                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                <span class="switch-handle"></span>
                            </label>
                        </div>
                    </div>
                    <div class="aside-options">
                        <div class="clearfix m-t-1">
                            <small><b>Option 4</b></small>
                            <label class="switch switch-text switch-pill switch-success switch-sm pull-right">
                                <input type="checkbox" class="switch-input" checked>
                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                <span class="switch-handle"></span>
                            </label>
                        </div>
                    </div>
                    <hr>
                    <h6>System Utilization</h6>
                    <div class="text-uppercase m-b-q m-t-2">
                        <small><b>CPU Usage</b></small>
                    </div>
                    <progress class="progress progress-xs progress-info m-a-0" value="25" max="100">25%</progress>
                    <small class="text-muted">348 Processes. 1/4 Cores.</small>
                    <div class="text-uppercase m-b-q m-t-h">
                        <small><b>Memory Usage</b></small>
                    </div>
                    <progress class="progress progress-xs progress-warning m-a-0" value="70" max="100">70%</progress>
                    <small class="text-muted">11444GB/16384MB</small>
                    <div class="text-uppercase m-b-q m-t-h">
                        <small><b>SSD 1 Usage</b></small>
                    </div>
                    <progress class="progress progress-xs progress-danger m-a-0" value="95" max="100">95%</progress>
                    <small class="text-muted">243GB/256GB</small>
                    <div class="text-uppercase m-b-q m-t-h">
                        <small><b>SSD 2 Usage</b></small>
                    </div>
                    <progress class="progress progress-xs progress-success m-a-0" value="10" max="100">10%</progress>
                    <small class="text-muted">25GB/256GB</small>
                </div>
            </div>
        </aside>
        <footer class="footer">
            <span class="text-left">
                <a href="https://genesisui.com/theme.html?id=alba">Alba</a> &copy; 2016 creativeLabs.
            </span>
            <span class="pull-right">
                Powered by <a href="http://GenesisUI.com">GenesisUI</a>
            </span>
        </footer>
        <!-- Bootstrap and necessary plugins -->
        <script src="assets/js/libs/jquery.min.js"></script>
        <script src="assets/js/libs/tether.min.js"></script>
        <script src="assets/js/libs/bootstrap.min.js"></script>
        <script src="assets/js/libs/pace.min.js"></script>
        <!-- Plugins and scripts required by all views -->
        <script src="assets/js/libs/Chart.min.js"></script>
        <script src="assets/js/views/shared.js"></script>
        <!-- GenesisUI main scripts -->
        <script src="assets/js/app.js"></script>
        
        
    </body>
</html>